<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>7_函数式组件使用props</title>

    <style>
    </style>
</head>

<body>

    <div id="main"></div>

    <!-- 引入react核心库，引入对象：React -->
    <script src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM，引入对象：ReactDOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="./js/babel.min.js"></script>
    <!-- 引入对组件属性约束，引入对象：PropTypes -->
    <script src="./js/prop-types.js"></script>

    <script type="text/babel">

        function Person(props) {
            const { name, age, gender } = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                    <li>性别：{gender}</li>
                </ul>
            )
        }

        Person.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            gender: PropTypes.string,
            speak: PropTypes.func
        }

        Person.defaultProps = {
            gender: '不告诉你',
            age: 18
        }

        const p = { name: "Tom", age: 30, gender: 'female', speak: speak }

        ReactDOM.render(<Person {...p} />, document.getElementById('main'))

        const speak = () => { }

    </script>
</body>

</html>